<template>
  <div class="login" ref="vantaRef" @click.once="playMusic">
    <div class="box p-20 flex flex-direction justify-center align-center">
      <div class="font40 text-bold"> WELCOME</div>
      <div class="goin text-c m-t-30" @click="logoIn">一键登录</div>
    </div>
    <Hello color="#fef9e4"/>
    <Music ref="music"/>
  </div>
</template>

<script setup>
import * as THREE from "three";
import clouds from "vanta/src/vanta.clouds";
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import {onMounted, ref, onBeforeUnmount} from "vue";

import Hello from "./components/hello.vue"
import Music from "../test/components/music.vue"

let router = useRouter()
let {commit} = useStore();
const music = ref(null);
const vantaRef = ref(null);
let vantaEffect = null;
// 生命周期
onBeforeUnmount(() => {
  if (vantaEffect) {
    vantaEffect.destroy();
  }
});
onMounted(() => {
  vantaEffect = clouds({
    el: vantaRef.value,
    THREE,
  });
});
// 请求 登录
let logoIn = async () => {
  commit("setToken", 'defToken');
  await router.push("/home");
};

// 播放音乐
let playMusic = async () => {
  music.value.playMusic()
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;
}

.box {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(90%, -50%);
  background-color: rgba($color: #ffffff, $alpha: 0.1);
  border-radius: 10px;
  color: #fff;
}
.goin {
  cursor: pointer;
  width: 110px;
  height: 30px;
  border: 1px solid #fff;
  border-radius: 20px;
  line-height: 30px;
  font-size: 16px;
}
.goin:hover {
  box-shadow: 3px 0px 20px 0px rgba(255, 255, 255, 0.5);
}
</style>
